<template>
    <el-card>
        <template #header>
            <h3>患者评价</h3>
            <el-rate v-model="evaluation" :colors="colors" disabled show-score text-color="#ff9900"
                :score-template="`${evaluation.toFixed(1)} 分`" />
        </template>
        <!-- 搜索区域 -->
        <el-form inline>
            <el-form-item label="患者" style="width: 200px">
                <el-input v-model="params.resident" @keyup.enter="searchEvaluations()"></el-input>
            </el-form-item>
            <el-form-item label="评分" style="width: 200px">
                <el-select v-model="params.score" placeholder="" style="width: 150px" @change="searchEvaluations()">
                    <el-option v-for="item in scoreOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" style="width: 200px">
                <el-input v-model="params.content" @keyup.enter="searchEvaluations()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchEvaluations()">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格区域 -->
        <el-table :data="evaluations" border @sort-change="handleSortChange">
            <el-table-column label="患者" prop="resident" sortable="custom" align="center" width="150"></el-table-column>
            <el-table-column label="评分" prop="score" sortable="custom" align="center" width="150">
                <template #default="scope">
                    <el-rate v-model="scope.row.score" :colors="colors" disabled />
                </template>
            </el-table-column>
            <el-table-column label="内容" prop="content" align="center" width=""></el-table-column>
            <el-table-column label="日期" prop="date" sortable="custom" align="center" width="150">
                <template #default="scope">
                    {{ scope.row.time.substring(0, 10) + ' ' + scope.row.time.substring(11, 16) }}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </el-card>
</template>

<script>
import { evaluationComputeAPI, evaluationsFindAPI } from '@/api/evaluate';
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            params: {
                // 搜索关键词
                doctorId: JSON.parse(sessionStorage.getItem("user")).user_id,
                resident: '',
                score: '',
                content: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            evaluations: [],
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            scoreOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '非常不满意'
                },
                {
                    value: '2',
                    label: '较差'
                },
                {
                    value: '3',
                    label: '一般'
                },
                {
                    value: '4',
                    label: '满意'
                },
                {
                    value: '5',
                    label: '非常满意'
                }
            ],
            evaluation: 0
        }
    },
    methods: {
        loadEvaluationInfoList() {
            evaluationsFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.evaluations = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        searchEvaluations() {
            this.loadEvaluationInfoList();
        },
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadEvaluationInfoList();
        },
        computeEvaluation() {
            evaluationComputeAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.evaluation = resp.data.data;
                    console.log(this.evaluation);

                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        handleSortChange({ prop, order }) {
            if (order) {
                // 根据 prop 和 order 进行排序
                this.params.sortProp = prop;
                this.params.sortOrder = order === 'ascending' ? 'asc' : 'desc';
                this.loadEvaluationInfoList();
            } else {
                // 清除排序
                delete this.params.sortProp;
                delete this.params.sortOrder;
                this.loadEvaluationInfoList();
            }
        }
    },
    created() {
        this.loadEvaluationInfoList();
        this.computeEvaluation();
    }
}
</script>

<style scoped>
.el-pagination {
    margin: 20px 0 0 450px;
    align-items: center;
}
</style>